@charset "UTF-8";
/** Filename: article_list.scss Author: xhh Description: 文章列表页，还没有编译的文件，用的是sass语法写 Date: 2018.03.26 */
/** Filename:reset.css Author:xhh Description:css样式样式统一化，将不同浏览器中标签元素的默认样式全部清除， 清除不同浏览器的差异性; Date: 2018.03.19 */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

body { line-height: 1; }

:focus { outline: 1; }

article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; }

nav ul, ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

a { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; background: transparent; text-decoration: none; }

ins { background-color: #ff9; color: #000; text-decoration: none; }

mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom: 1px dotted #000; cursor: help; }

table { border-collapse: collapse; border-spacing: 0; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #cccccc; margin: 1em 0; padding: 0; }

input, select { vertical-align: middle; }

img { border: 0 none; display: block; }

i, em { font-style: normal; }

/** filename: common.scss author: xhh description: 整个网站公用样式，还没有编译的文件，用的是sass语法写 date: 2018.03.19 */
/* 变量 */
/* 超出部分隐藏 start*/
html, body { position: relative; font-size: 16px; font-family: arial,"Microsoft YaHei","微软雅黑",Helvetica,Tahoma,Arial,STXihei,sans-serif; overflow-x: hidden; }

/* 超出部分隐藏 end */
/* 清除浮动的类 start */
.clearfix::before, .clearfix::after { content: "."; display: block; height: 0; line-height: 0; visibility: hidden; clear: both; }

/* 清除浮动的类 end */
/* 网站的版心 start */
.wrapper { max-width: 1200px; min-width: 600px; margin: 0 auto; }

/* 头部 start */
.site-header { z-index: 100000; position: fixed; top: 0; left: 0; width: 100%; background-color: rgba(0, 0, 0, 0.75); }
.site-header .wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
.site-header .wrapper .site-logo img { max-height: 2.6rem; width: auto; }
.site-header .wrapper .site-header-right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 85%; }
.site-header .wrapper .site-header-right .site-header-fun { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.site-header .wrapper .site-header-right .site-header-fun a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: #fff; }
.site-header .wrapper .site-header-right .site-header-fun span { font-size: .65rem; }
.site-header .wrapper .site-header-right .site-header-fun i { display: inline-block; height: 22px; width: 22px; margin-left: 1.8rem; background-image: url(../img/index/icon/icon_nav.png); background-repeat: no-repeat; }
.site-header .wrapper .site-header-right .site-header-fun .c-en { margin-left: 1.8rem; }
.site-header .wrapper .site-header-right .site-header-fun .icon-login { background-position: 3px 2px; }
.site-header .wrapper .site-header-right .site-header-fun .icon-shipping { background-position: 0 -60px; }
.site-header .wrapper .site-header-nav { width: 75%; }
.site-header .wrapper .header-nav-list { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; }
.site-header .wrapper .header-nav-list li { position: relative; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; text-align: center; }
.site-header .wrapper .header-nav-list li.active a { background-color: rgba(255, 255, 255, 0.85); color: #333; font-weight: 600; }
.site-header .wrapper .header-nav-list li > a { display: inline-block; height: 100%; width: 100%; line-height: 5.4; font-size: .875rem; color: #fff; }
.site-header .wrapper .header-nav-list li > a:hover { -webkit-transition: all .2s linear; transition: all .2s linear; background-color: rgba(255, 255, 255, 0.85); color: #333; font-weight: 600; }
.site-header .wrapper .header-nav-list ul { display: none; width: 100%; position: absolute; top: 75px; background-color: rgba(0, 0, 0, 0.65); }
.site-header .wrapper .header-nav-list ul a { line-height: 4; }

/* 头部 end */
.site-footer { margin-top: 3rem; border-top: 1px solid #ccc; }

.site-info-links { margin-top: 4%; }
.site-info-links .info-links-list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.site-info-links .info-links-item { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.site-info-links .info-links-item a { color: #222; letter-spacing: 1px; text-transform: uppercase; }
.site-info-links .info-links-item h3 { font-weight: 600; font-size: .875rem; margin-top: .5rem; }
.site-info-links .info-links-item i { display: inline-block; width: 50px; height: 50px; background-image: url(../img/public/icon_sprite.png); background-repeat: no-repeat; background-size: cover; }
.site-info-links .info-links-item .icon-back { background-position: 0 0; }
.site-info-links .info-links-item .icon-support { background-position: 0 -100px; }
.site-info-links .info-links-item .icon-shipping { background-position: 0 -200px; }
.site-info-links .info-links-item .icon-quality { background-position: 0 -300px; }

.site-footer-links { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-sizing: border-box; box-sizing: border-box; border-right: 1px solid #ccc; border-left: 1px solid #ccc; }
.site-footer-links .footer-links-box { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 20%; padding: 2rem 0; }
.site-footer-links .footer-links-box.last { width: 20%; border-right: 1px solid #ccc; border-left: 1px solid #ccc; }
.site-footer-links .footer-links-box.last .footer-links-contacts { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.site-footer-links .footer-links-box.last .footer-dl { padding-left: 0; }
.site-footer-links .footer-dl { padding-left: 2rem; }
.site-footer-links .footer-dt { padding-bottom: 1rem; }
.site-footer-links .footer-dt .dt-title { font-weight: 600; font-size: 1.2rem; text-transform: capitalize; color: #000; }
.site-footer-links .footer-dd { display: -webkit-box; display: -ms-flexbox; display: flex; }
.site-footer-links .footer-dd a { text-transform: capitalize; padding-bottom: .2rem; line-height: 2; font-size: .875rem; color: #666666; -webkit-transition: all .3s linear; transition: all .3s linear; }
.site-footer-links .footer-dd a:hover { color: #000; font-weight: 600; }
.site-footer-links .footer-links-contacts .phone a { font-size: 1.4rem; color: #000; }
.site-footer-links .footer-links-contacts .contact a { color: #666; -webkit-transition: all .3s linear; transition: all .3s linear; }
.site-footer-links .footer-links-contacts .contact a:hover { color: #000; font-weight: 600; }
.site-footer-links .footer-links-contacts .address a { font-size: .875rem; color: #c29673; -webkit-transition: all .3s linear; transition: all .3s linear; }
.site-footer-links .footer-links-contacts .address a:hover { color: #e5a750; font-weight: 600; }
.site-footer-links .footer-links-logo { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 20%; }
.site-footer-links .footer-links-logo a { max-width: 50%; }
.site-footer-links .footer-links-logo img { max-width: 100%; }

.site-footer-copyright { width: 100%; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; margin-bottom: 2rem; }
.site-footer-copyright .wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-sizing: border-box; box-sizing: border-box; border-right: 1px solid #ccc; border-left: 1px solid #ccc; }
.site-footer-copyright .copyright { width: 80%; padding: 1.4rem 0 1.4rem 2rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #666666; font-size: .875rem; -webkit-box-sizing: border-box; box-sizing: border-box; }
.site-footer-copyright .copyright img { max-width: 100%; }
.site-footer-copyright .copyright p { margin-left: .8rem; }
.site-footer-copyright .getnews { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 20%; padding: 1.4rem 0; border-left: 1px solid #ccc; }
.site-footer-copyright .getnews a { position: relative; width: 30px; height: 30px; background: url(../img/public/icon_wei.png) no-repeat; line-height: 30px; }
.site-footer-copyright .getnews .footer-weibo { margin-right: 1.6rem; background-position: 0 0; }
.site-footer-copyright .getnews .footer-weibo:hover { border-bottom: none; background-position: 0 -30px; }
.site-footer-copyright .getnews .footer-weixin { background-position: 0 -60px; }
.site-footer-copyright .getnews .footer-weixin:hover { border-bottom: none; background-position: 0 -90px; }

/* 网站底部样式 end */
/* 遮罩层 start */
.mask { display: none; z-index: 1000; position: fixed; top: 0; left: 0; height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.65); }

/* 遮罩层 end */
/* 登陆框 start */
.site-login-wrapper { display: none; z-index: 1001; position: fixed; top: 50%; left: 50%; padding: 3% 2%; background-color: #fff; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.site-login-wrapper .icon-close { position: absolute; top: 5px; right: 5px; height: 20px; width: 20px; background: url(../img/index/icon/icon_close.png) no-repeat center; background-size: cover; cursor: pointer; }
.site-login-wrapper h2 { font-size: 1.2rem; text-transform: uppercase; }
.site-login-wrapper .login-input-box { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-top: 1.2rem; border-bottom: 1px solid #ddd; }
.site-login-wrapper .login-input-box label { color: #666; font-size: .875rem; }
.site-login-wrapper .login-input-box input { padding-right: 6rem; margin-top: .5rem; border: 0 none; font-size: 1rem; line-height: 2; text-indent: 5px; background: transparent; outline: none; }
.site-login-wrapper .login-input-box ::-webkit-input-placeholder { color: #ccc; }
.site-login-wrapper .login-input-box a { position: absolute; right: 0; top: 50%; -webkit-transform: translate(0, 40%); transform: translate(0, 40%); font-size: .65rem; color: #666; }
.site-login-wrapper .login-input-box a:hover { color: #333; }
.site-login-wrapper .radio-box { border-bottom: 0 none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.site-login-wrapper .radio-box label { cursor: pointer; }
.site-login-wrapper .radio-box input { margin-right: .8rem; }
.site-login-wrapper .login-btn { width: 100%; padding: .8rem 0; border: 0 none; margin-top: 1.2rem; text-transform: uppercase; color: #fff; background-color: #000; }
.site-login-wrapper p { margin-top: 1rem; text-align: center; }
.site-login-wrapper p a { color: #999; }

/* 登陆框 end */
/* css3的媒体查询 start */
/* 768px~979px显示的样式 start */
@media (min-width: 768px) and (max-width: 979px) { html { font-size: 15px; } }
/* 768px~979px显示的样式 end */
/* 小于767px显示的样式 start */
@media (max-width: 767px) { html { font-size: 14px; } }
/* 小于767px显示的样式 end */
/* 小于500px显示的样式 start */
/* 小于500px显示的样式 end */
/* css3的媒体查询 end */
/* 文章主体部分 start */
.site-article-wrapper .article-header { max-height: 640px; }
.site-article-wrapper .article-header img { height: 100%; width: 100%; }
.site-article-wrapper .site-article-list { margin-bottom: 6%; }
.site-article-wrapper .article-list { max-width: 90%; margin: 0 auto; }
.site-article-wrapper .article-item { margin-top: 6%; }
.site-article-wrapper .article-img { margin: 0 auto; }
.site-article-wrapper .article-img img { max-width: 100%; }
.site-article-wrapper .article-img-more { overflow: hidden; position: relative; }
.site-article-wrapper .article-img-list { position: relative; left: 0; display: -webkit-box; display: -ms-flexbox; display: flex; width: 400%; }
.site-article-wrapper .article-img-list li { width: 100%; }
.site-article-wrapper .article-img-list li img { max-width: 100%; }
.site-article-wrapper .article-img-num { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 2; position: absolute; bottom: 1rem; left: 50%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); }
.site-article-wrapper .article-img-num li { width: 1rem; height: 2px; background-color: Gray; margin: .3rem; cursor: pointer; }
.site-article-wrapper .article-img-num li:hover { height: 4px; background-color: #fff; }
.site-article-wrapper .article-img-num li.active { height: 4px; background-color: #fff; }
.site-article-wrapper .article-video { width: 100%; }
.site-article-wrapper .article-video video { max-height: 460px; width: 100%; background-color: #000; }
.site-article-wrapper .article-video { position: relative; }
.site-article-wrapper .article-video img { max-width: 100%; }
.site-article-wrapper .article-video .icon-play { position: absolute; left: 50%; top: 50%; height: 28px; width: 28px; background: url(../img/article/list/icon_play.png) no-repeat center; background-size: cover; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); cursor: pointer; }
.site-article-wrapper .article-time { margin-top: 1.6rem; font-size: .875rem; color: #666; text-transform: uppercase; }
.site-article-wrapper .article-time em { font-style: normal; color: #e3c188; }
.site-article-wrapper .article-title { margin-top: .5rem; font-size: 1.8rem; }
.site-article-wrapper .article-content { margin-top: .5rem; font-size: .875rem; line-height: 1.8; color: #666; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.site-article-wrapper .read-more-btn { position: relative; display: inline-block; padding: 1rem 1.2rem; border: 1px solid #a5afa5; margin-top: 2rem; text-transform: uppercase; font-size: .875rem; font-weight: bold; color: #000; }
.site-article-wrapper .read-more-btn::before { content: ''; position: absolute; top: 2px; left: 2px; width: 100%; height: 100%; border: 1px solid #a5afa5; }
.site-article-wrapper .read-more-btn:hover { text-decoration: underline; }
.site-article-wrapper .read-more-btn:hover::before { top: 0; left: 0; -webkit-transition: all .2s linear; transition: all .2s linear; }
.site-article-wrapper .site-article-pages { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: 3rem; }
.site-article-wrapper .site-article-pages span { display: inline-block; width: 2.4rem; height: 2.4rem; border: 1px solid #a5a5a5; margin: 0 .5rem; line-height: 2.4rem; text-align: center; cursor: pointer; background-repeat: no-repeat; background-position: center; }
.site-article-wrapper .site-article-pages .pre-page { background-image: url(../img/article/list/icon_left.png); }
.site-article-wrapper .site-article-pages .next-page { background-image: url(../img/article/list/icon_right.png); }
.site-article-wrapper .site-article-pages a { display: inline-block; width: 2.4rem; height: 2.4rem; border: 1px solid #a5a5a5; margin: 0 .5rem; line-height: 2.4rem; text-align: center; color: #a5a5a5; }
.site-article-wrapper .site-article-pages a.active { border: 1px solid #d7bc8f; color: #d7bc8f; }
.site-article-wrapper .site-article-pages a:hover { border: 1px solid #d7bc8f; color: #d7bc8f; }

/* 文章主体部分 end */
/* 遮罩层 start */
.mask { display: none; z-index: 1000; position: fixed; top: 0; left: 0; height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.85); }

/* 遮罩层 end */
/* 视频播放盒子 start */
.play-video-box { display: none; z-index: 1001; position: fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.play-video-box video { width: 100%; height: 100%; }

/* 视频播放盒子 end */
